<template>
	<view class="content">
		<uni-forms :rules="rules" :model="formData" ref="formRef">
			<!-- 表单内容 -->
			<uni-forms-item name="name" class="form-item" required>
				<text class="label">收货人</text>
				<input class="input" placeholder="请填写收货人姓名" v-model="formData.name" />
			</uni-forms-item>
			<uni-forms-item name="phone" class="form-item" required>
				<text class="label">手机号码</text>
				<input class="input" placeholder="请填写收货人手机号码" v-model="formData.phone" />
			</uni-forms-item>
			<uni-forms-item name="fullLocation" class="form-item" required>
				<text class="label">所在地区</text>
				<picker @change="onRegionChange" class="picker" mode="region" :value="formData.fullLocation">
					<view v-if="formData.fullLocation">{{formData.fullLocation}}</view>
					<view v-else class="placeholder">请选择省/市/区(县)</view>
				</picker>
			</uni-forms-item>
			<uni-forms-item name="fullAddress" class="form-item" required>
				<text class="label">详细地址</text>
				<input class="input" placeholder="街道、楼牌号等信息" v-model="formData.fullAddress" />
			</uni-forms-item>
			<uni-forms-item name="isDefault" class="form-item">
				<label class="label">设为默认地址</label>
				<switch @change="onSwitchChange" class="switch" color="#27ba9b" :checked="formData.isDefault ===1" />
			</uni-forms-item>
		</uni-forms>
	</view>
	<!-- 提交按钮 -->
	<button class="button" @tap="onSubmit">保存并使用</button>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue'
	import { getMemberAddressApi, addAddressApi, updateAddressApi } from '@/api/address/index.ts'
	import type { MemberAddressParams } from '@/api/address/types.ts';
	import { useMemberStore } from '@/store/modules/member.ts'
	const formRef = ref<UniHelper.UniFormsInstance>()
	const query = defineProps<{
		id ?: string
	}>();
	const memberStore = useMemberStore();


	// 表单数据
	const formData = ref<MemberAddressParams>({
		userId: memberStore.user.userId,
		name: '',
		phone: '',
		fullLocation: '',
		provinceCode: '',
		cityCode: '',
		districtCode: '',
		fullAddress: '',
		isDefault: 0,
		tagName: ''
	})

	const rules : UniHelper.UniFormsRules = {
		name: {
			rules: [{ required: true, errorMessage: '请输入收货人姓名' }],
		},
		phone: {
			rules: [
				{ required: true, errorMessage: '请输入联系方式' },
				{ pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
			],
		},
		fullLocation: {
			rules: [{ required: true, errorMessage: '请选择所在地区' }],
		},
		fullAddress: {
			rules: [{ required: true, errorMessage: '请选择详细地址' }],
		},
	}

	/* 设置动态标题 */
	uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新增地址' })

	/* 获取收货地址详情 */
	const getMemberAddress = async () => {
		if (query.id) {
			const res = await getMemberAddressApi(query.id)
			console.log(res)
			// formData.value = res.data; //直接赋值
			// 把数据合并到表单中
			Object.assign(formData.value, res.data)
		}

	}
	// let cityCode = []
	/* 获取省市区信息RegionPickerOnChange */
	const onRegionChange : UniHelper.RegionPickerOnChange = (ev) => {
		//将ev.detail.value数组用空格拼接打散成字符串
		formData.value.fullLocation = ev.detail.value.join(' ');
		// cityCode = ev.detail.code
		// formData.value.provinceCode = cityCode[0];
		// formData.value.cityCode = cityCode[1];
		// formData.value.districtCode = cityCode[2];
		//对应解构出省，市，区
		const [provinceCode, cityCode, districtCode] = ev.detail.code!;
		//合并成对象赋值,否则就要写三行代码一个一个的赋值
		Object.assign(formData.value, { provinceCode, cityCode, districtCode })
	}
	/* 默认地址 */
	const onSwitchChange : UniHelper.SwitchOnChange = (ev) => {
		//结果是booler类型，后台需要的是0和1，故需转换
		formData.value.isDefault = ev.detail.value ? 1 : 0
	}

	onLoad(() => {
		getMemberAddress();
	})

	/* 数据提交 */
	const onSubmit = async () => {
		console.log(formData.value)
		try {
			await formRef.value?.validate?.()
			if (query.id) {
				await updateAddressApi(formData.value)
			} else {
				await addAddressApi(formData.value)
			}
			uni.showToast({
				icon: 'success',
				title: query.id ? '修改成功' : '增加成功'
			})
			setTimeout(() => {
				uni.navigateBack();
			}, 400)
		} catch (error) {
			uni.showToast({ icon: 'error', title: '请按提示填写！' })
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.content {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.form-item,
		.uni-forms-item {
			display: flex;
			align-items: center;
			min-height: 96rpx;
			padding: 25rpx 10rpx 40rpx;
			background-color: #fff;
			font-size: 28rpx;
			border-bottom: 1rpx solid #ddd;
			position: relative;
			margin-bottom: 0;

			// 调整 uni-forms 样式
			.uni-forms-item__content {
				display: flex;
			}

			.uni-forms-item__error {
				margin-left: 200rpx;
			}

			&:last-child {
				border: none;
			}

			.label {
				width: 200rpx;
				color: #333;
			}

			.input {
				flex: 1;
				display: block;
				height: 46rpx;
			}

			.switch {
				position: absolute;
				right: -20rpx;
				transform: scale(0.8);
			}

			.picker {
				flex: 1;
			}

			.placeholder {
				color: #808080;
			}
		}
	}

	.button {
		height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: #27ba9b;
	}
</style>